<template>
  <div id="app">
    <a-row type="flex">
      <a-col span="16">
        <div class="vui-login-left">
          <div
            style="display: flex; flex-direction: column; align-items: center; position: relative; z-index: 3;"
          >
            <div class="title">优质服务，追求卓越</div>
            <p>Amazing Stuff is Lorem Here.ICE Team</p>
          </div>
          <div class="mask"></div>
        </div>
      </a-col>
      <a-col span="8">
        <div class="vui-login-right">
          <a-form class="login-form" :form="form" @submit="handleSubmit" style="width: 50%;">
            <h4 class="title">用户登录</h4>
            <a-form-item>
              <a-input
                type="text"
                placeholder="请输入用户名"
                size="large"
                v-decorator="ruleInline.username"
              >
                <a-icon type="user" slot="prefix"/>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                v-decorator="ruleInline.password"
                type="password"
                placeholder="请输入密码"
                size="large"
              >
                <a-icon type="lock" slot="prefix"/>
              </a-input>
            </a-form-item>
            <a-form-item style="text-align:center">
              <a-button
                type="primary"
                long
                size="large"
                html-type="submit"
                class="vui-login-button"
              >登录</a-button>
              <div>
                <a href="#" style="margin-right:15px">立即注册</a>
                <a href="#">找回密码</a>
              </div>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      ruleInline: {
        username: [
          'username',
          {
            validateTrigger: ['change', 'blur'],
            rules: [{ required: true, whitespace: true, message: '请输入用户名' }]
          }
        ],
        password: [
          'password',
          {
            validateTrigger: ['change', 'blur'],
            rules: [
              { required: true, message: '请输入密码' },
              { type: 'string', min: 6, message: '密码最少为6位' }
            ]
          }
        ]
      }
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$message.success('验证成功')
        } else {
          this.$message.error('验证失败')
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
#app {
  position: relative;
  height: 100vh;
}
.vui-login {
  &-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    height: 100vh;
    background-image: url(https://unpkg.com/@icedesign/login-panel-block@2.0.1/build/images/a508d48b5bc825e89a42da6c41afa22a.jpg);
    background-size: cover;
    color: #fff;
    .title {
      margin-top: 60px;
      font-weight: 500;
      font-size: 38px;
      line-height: 1.5;
      text-align: center;
    }
    .mask {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      background: rgba(0, 0, 0, 0.6);
      z-index: 2;
    }
  }
  &-right {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: rgb(255, 255, 255);
    .title {
      margin-bottom: 40px;
      font-weight: 500;
      font-size: 32px;
      text-align: center;
      letter-spacing: 4px;
    }
  }
  &-button {
    font-size: 18px;
    width: 50%;
    text-align: center;
    margin: 30px auto 10px;
    box-shadow: 0 0 8px rgba(45, 140, 240, 0.5);
  }
}
</style>
